مرجع تخصصی بروزترین مقالات طراحی اپلیکیشن

شروع برنامه خردسالان
وقتی که اپ را جاری ساختن می کنید ویجت MotionLayout به صورت اتومات گروه قیود نام برده در ویژگی constraintSetStart را در عنصر Transition به عمل می گیرد. از این رو برای شروع کارتن فقط کافی میباشد اسلوب ()transitionToEnd ویجت طراحی اپلیکیشن در مشهد را فراخوانی نمایید.

د تحت که بایستی به Handler روی داد on-click که در قدم قبل ساخت و ساز شد اضافه خواهد شد، نحوه عمل را به شما علامت میدهد:

motion_container.transitionToEnd()
در‌این مرحله در حالتی که نرم افزار انجام گردیده و دکمه مربوطه فشرده خواهد شد می توانید مشاهده کنید که ویجت ImageView به نرمی در پهنا برگه تکان می‌نماید.

5. رئیس رویدادهای برنامه خردسالان
با اتصال شیء TransitionListener به ویجت MotionLayout میتوانید فرایند برنامه خردسالان را به صورت ظریف‌تری پیگیری نمائید.

motion_container.setTransitionListener(
object: MotionLayout.TransitionListener {
// More code here
}
)
رابط TransitionListener دو اسلوب تجریدی داراست و اندروید استودیو به صورت اتومات متد‌هایی برای آنها تولید می‌نماید.

اسلوب ()onTransitionCompleted هنگامی که گذار از یک تیم قیود به تیم دیگر بدون نقص شد فراخوانی میگردد. اینک از آن برای ریست قیود ویجت ImageView با فراخوانی روال ()transitionToStart در داخلش به کارگیری می کنیم.

override fun onTransitionCompleted(motionLayout: MotionLayout?,
currentId: Int) {
if(currentId == R.id.ending_set) {
// Return to original constraint set
motion_container.transitionToStart()
}
}
اسلوب ()onTransitionChange هر توشه که پروسه جلو رفتن برنامه کودک تغییری پیدا نماید، فراخوانی میگردد. در اینگونه وضعیتی مراحل جلو رفتن برنامه کودکان یکی اعشاری میباشد که دربین 0 و 1 جای دارد. کد پایین طریق به‌روزرسانی SeekBar بر پایه ی مراحل جلو رفتن کارتن را آرم میدهد:

override fun onTransitionChange(motionLayout: MotionLayout?,
startId: Int,
endId: Int,
progress: Float) {
seekbar.progress = ceil(progress * 100).toInt()
}
با اجرای دوباره نرم‌افزار دو کارتن در درحال حاضر پخش را مشاهده می کنید.

6. ساخت و ساز قاب‌های کلیدی (key frames)
در کارتون ما ویجت ImageView در مسیری که مشابه یک خط راست میباشد، تکان می‌نماید. ادله این فرمان آن میباشد که ویجت MotionLayout صرفا دو نقطه برای شغل دارااست: نقطه ابتدایی که کناره سمت راست و زیر شیت میباشد و نقطه انتهایی که کناره سمت چپ و بالای کاغذ میباشد. در شرایطی‌که میخواهید صورت مسیر را تغییر‌و تحول دهید بایستی چندین نقطه بین این دو نقطه آغازین و انتهایی گزینش نمایید. برای اعمال این شغل می بایست کادر‌های کلیدی جدیدی ساخت شوند.

کلیک نمایید
قبل از آن که آغاز به ساخت‌و‌ساز کادر‌های کلیدی بکنید می بایست عنصر KeyFrameSet را به عنصر Transition صحنه متحرک خویش اضافه نمائید. باطن این عنصر میتوانید هر تعداد که می خواهید قاب‌های کلیدی ساخت‌و‌ساز فرمائید.

ویجت MotionLayout از اشکال مختلفی از قاب‌های کلیدی حفاظت می‌نماید. درین راهنما ما صرفا با دو نوع از آنان شغل میکنیم: قاب‌های KeyPosition و قاب‌های KeyCycle .

کادر‌های KeyPosition انواعی از قاب‌ها می‌باشند که صورت مسیر را تغییر و تحول میدهند. در حین ساخت این قاب‌ها می بایست مطمئن گردید که ID ویجت غرض، یک شرایط در راستای تایملاین که هر عددی فی مابین 0 تا 100 می تواند باشد و همینطور خصوصیات X و Y مناسب که به طور درصد ذکر می‌گردد را مشخص و معلوم ساخته‌اید. خصوصیات میتوانند به صورت نسبی در ارتباط با محورهای X و Y یا این که به صورت نسبتی در ارتباط با خویش مسیر ذکر شوند.

کد پایین طریق ساخت‌و‌ساز دو کادر را نماد میدهد که سبب ساز می گردند ویجت ImageView مسیری را طی نماید که از تصادم با دکمه و Seek Bar خودداری گردد.

app:target="@+id/actor"
app:framePosition="30"
app:type="deltaRelative"
app:percentX="0.85" />
app:target="@+id/actor"
app:framePosition="60"
app:type="deltaRelative"
app:percentX="1" />
در‌حالتی که نرم‌افزار را جاری ساختن فرمائید میبینید که کارتن مشابه تصویر تحت خواهد بود:

اما شما میتوانید قاب‌های کلیدی بیشتری را اضافه نمایید. برای مثال با اضافه کردن قاب‌های کلیدی تحت به انتهای تایملاین می توانید سبب ساز گردید که ویجت ImageView مسیری منحنی‌خیس را طی نماید.

app:target="@+id/actor"
app:framePosition="80"
app:type="deltaRelative"
app:percentX="0.5" />
با به کارگیری از قاب KeyCycle در راستای قاب‌های KeyPosition می تواند نوسان‌هایی در برنامه کودکان ساخت‌و‌ساز فرمایید. در طی ساخت و ساز این قاب‌ها می بایست ID ویجت مقصود، موقعیتی در راستای تایملاین و همینطور مقدار مناسب مشخصه‌ای که به سمت جلو و عقب نوسان می‌نماید را بیان نمائید. به علاوه بایستی با گزینش ریزه کاری همانند صورت موجی و ارتفاع‌موج، برنامه کودک نوسانی را تنظیمات فرمایید.

کد ذیل یک قاب KeyCycle ساخت و ساز می‌نماید که از نوسانگر با موج سینوسی با چرخش عصر‌ای ویجت ImageView به واحد سنجش 50 مرتبه به کار گیری می‌نماید.

app:target="@+id/actor"
app:framePosition="30"
android:rotation="50"
app:waveShape="sin"
app:wavePeriod="1" />
با اجرای دوباره نرم افزار می توانید انیمیشنی شبیه پایین را مشاهده کنید:

7. تعامل‌پذیر ساختن ویجت های انیمیشنی
در‌این اپلیکیشن برای استارت کارتون یک دکمه فشرده می‌گردد. با این هم اکنون اینگونه دکمه‌ای همواره الزامی وجود ندارد، زیرا ویجت MotionLayout اذن می دهد که handler های روی داد لمس را به ویجتی که قرار میباشد انیمیت خواهد شد متصل سازید. فعلا این ویجت از رویدادهای on-click و on-swipe حمایت می‌نماید.

شروع برنامه خردسالان
وقتی که اپ را جاری ساختن می کنید ویجت MotionLayout به صورت اتومات گروه قیود نام برده در ویژگی constraintSetStart را در عنصر Transition به عمل می گیرد. از این رو برای شروع کارتن فقط کافی میباشد اسلوب ()transitionToEnd ویجت طراحی اپلیکیشن در مشهد را فراخوانی نمایید.

د تحت که بایستی به Handler روی داد on-click که در قدم قبل ساخت و ساز شد اضافه خواهد شد، نحوه عمل را به شما علامت میدهد:

motion_container.transitionToEnd()
در‌این مرحله در حالتی که نرم افزار انجام گردیده و دکمه مربوطه فشرده خواهد شد می توانید مشاهده کنید که ویجت ImageView به نرمی در پهنا برگه تکان می‌نماید.

5. رئیس رویدادهای برنامه خردسالان
با اتصال شیء TransitionListener به ویجت MotionLayout میتوانید فرایند برنامه خردسالان را به صورت ظریف‌تری پیگیری نمائید.

motion_container.setTransitionListener(
object: MotionLayout.TransitionListener {
// More code here
}
)
رابط TransitionListener دو اسلوب تجریدی داراست و اندروید استودیو به صورت اتومات متد‌هایی برای آنها تولید می‌نماید.

اسلوب ()onTransitionCompleted هنگامی که گذار از یک تیم قیود به تیم دیگر بدون نقص شد فراخوانی میگردد. اینک از آن برای ریست قیود ویجت ImageView با فراخوانی روال ()transitionToStart در داخلش به کارگیری می کنیم.

override fun onTransitionCompleted(motionLayout: MotionLayout?,
currentId: Int) {
if(currentId == R.id.ending_set) {
// Return to original constraint set
motion_container.transitionToStart()
}
}
اسلوب ()onTransitionChange هر توشه که پروسه جلو رفتن برنامه کودک تغییری پیدا نماید، فراخوانی میگردد. در اینگونه وضعیتی مراحل جلو رفتن برنامه کودکان یکی اعشاری میباشد که دربین 0 و 1 جای دارد. کد پایین طریق به‌روزرسانی SeekBar بر پایه ی مراحل جلو رفتن کارتن را آرم میدهد:

override fun onTransitionChange(motionLayout: MotionLayout?,
startId: Int,
endId: Int,
progress: Float) {
seekbar.progress = ceil(progress * 100).toInt()
}
با اجرای دوباره نرم‌افزار دو کارتن در درحال حاضر پخش را مشاهده می کنید.

6. ساخت و ساز قاب‌های کلیدی (key frames)
در کارتون ما ویجت ImageView در مسیری که مشابه یک خط راست میباشد، تکان می‌نماید. ادله این فرمان آن میباشد که ویجت MotionLayout صرفا دو نقطه برای شغل دارااست: نقطه ابتدایی که کناره سمت راست و زیر شیت میباشد و نقطه انتهایی که کناره سمت چپ و بالای کاغذ میباشد. در شرایطی‌که میخواهید صورت مسیر را تغییر‌و تحول دهید بایستی چندین نقطه بین این دو نقطه آغازین و انتهایی گزینش نمایید. برای اعمال این شغل می بایست کادر‌های کلیدی جدیدی ساخت شوند.

کلیک نمایید
قبل از آن که آغاز به ساخت‌و‌ساز کادر‌های کلیدی بکنید می بایست عنصر KeyFrameSet را به عنصر Transition صحنه متحرک خویش اضافه نمائید. باطن این عنصر میتوانید هر تعداد که می خواهید قاب‌های کلیدی ساخت‌و‌ساز فرمائید.

ویجت MotionLayout از اشکال مختلفی از قاب‌های کلیدی حفاظت می‌نماید. درین راهنما ما صرفا با دو نوع از آنان شغل میکنیم: قاب‌های KeyPosition و قاب‌های KeyCycle .

کادر‌های KeyPosition انواعی از قاب‌ها می‌باشند که صورت مسیر را تغییر و تحول میدهند. در حین ساخت این قاب‌ها می بایست مطمئن گردید که ID ویجت غرض، یک شرایط در راستای تایملاین که هر عددی فی مابین 0 تا 100 می تواند باشد و همینطور خصوصیات X و Y مناسب که به طور درصد ذکر می‌گردد را مشخص و معلوم ساخته‌اید. خصوصیات میتوانند به صورت نسبی در ارتباط با محورهای X و Y یا این که به صورت نسبتی در ارتباط با خویش مسیر ذکر شوند.

کد پایین طریق ساخت‌و‌ساز دو کادر را نماد میدهد که سبب ساز می گردند ویجت ImageView مسیری را طی نماید که از تصادم با دکمه و Seek Bar خودداری گردد.

app:target="@+id/actor"
app:framePosition="30"
app:type="deltaRelative"
app:percentX="0.85" />
app:target="@+id/actor"
app:framePosition="60"
app:type="deltaRelative"
app:percentX="1" />
در‌حالتی که نرم‌افزار را جاری ساختن فرمائید میبینید که کارتن مشابه تصویر تحت خواهد بود:

اما شما میتوانید قاب‌های کلیدی بیشتری را اضافه نمایید. برای مثال با اضافه کردن قاب‌های کلیدی تحت به انتهای تایملاین می توانید سبب ساز گردید که ویجت ImageView مسیری منحنی‌خیس را طی نماید.

app:target="@+id/actor"
app:framePosition="80"
app:type="deltaRelative"
app:percentX="0.5" />
با به کارگیری از قاب KeyCycle در راستای قاب‌های KeyPosition می تواند نوسان‌هایی در برنامه کودکان ساخت‌و‌ساز فرمایید. در طی ساخت و ساز این قاب‌ها می بایست ID ویجت مقصود، موقعیتی در راستای تایملاین و همینطور مقدار مناسب مشخصه‌ای که به سمت جلو و عقب نوسان می‌نماید را بیان نمائید. به علاوه بایستی با گزینش ریزه کاری همانند صورت موجی و ارتفاع‌موج، برنامه کودک نوسانی را تنظیمات فرمایید.

کد ذیل یک قاب KeyCycle ساخت و ساز می‌نماید که از نوسانگر با موج سینوسی با چرخش عصر‌ای ویجت ImageView به واحد سنجش 50 مرتبه به کار گیری می‌نماید.

app:target="@+id/actor"
app:framePosition="30"
android:rotation="50"
app:waveShape="sin"
app:wavePeriod="1" />
با اجرای دوباره نرم افزار می توانید انیمیشنی شبیه پایین را مشاهده کنید:

7. تعامل‌پذیر ساختن ویجت های انیمیشنی
در‌این اپلیکیشن برای استارت کارتون یک دکمه فشرده می‌گردد. با این هم اکنون اینگونه دکمه‌ای همواره الزامی وجود ندارد، زیرا ویجت MotionLayout اذن می دهد که handler های روی داد لمس را به ویجتی که قرار میباشد انیمیت خواهد شد متصل سازید. فعلا این ویجت از رویدادهای on-click و on-swipe حمایت می‌نماید.